<template>
  <div class="online-public-option">
    <div class="naviga">数据采集&nbsp;>&nbsp;线上舆情数据</div>
    <div class="margin-top">
      <div class="border-r product-box">
        <div class="title">产品舆情</div>
        <div class="product-content">
          <i class="el-icon-question blue"></i> 采集<span class="blue">淘宝/天猫、京东</span>平台，
          <span class="blue">{{commentNum | fmoney}} </span>条数据&nbsp;
          <!--<span class="gradient-btn point">-->
                      <!--开通更多渠道-->
          <!--</span>-->
          <span class="right">更新时间： {{today}}</span>
        </div>
      </div>
      <div style="height: 800px;position: relative">
        <div class="comment-box border-r margin-top ">
          <div class="title">
            评论分析
            <span class="right normal"><span class="blue">{{commentNum | fmoney}} </span>条</span>
          </div>
          <el-col :span="24">
            <el-form :inline="true" :model="formInline" class="margin-top" style="width: 100%" label-position="right">
              <el-form-item label="品类" label-width="60px">
                <el-select v-model="formInline.category" placeholder="" style="width: 100px"
                           @change="selected(formInline.category,1)">
                  <el-option
                    label="全部"
                    value="all">
                  </el-option>
                  <el-option
                    v-for="item in categorySelectData"
                    :key="item.id"
                    :label="item.categoryName"
                    :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="渠道" label-width="60px">
                <el-select v-model="formInline.entry" placeholder="" style="width: 100px"
                           @change="selected(formInline.entry,2)">
                  <el-option
                    label="全部"
                    value="all">
                  </el-option>
                  <el-option
                    v-for="item in entrySelectData"
                    :key="item.id"
                    :label="item.entry"
                    :value="item.entry">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="品牌">
                <el-select v-model="formInline.brand" placeholder="" style="width: 100px"
                           @change="selected(formInline.brand,3)">
                  <el-option
                    label="全部"
                    value="all">
                  </el-option>
                  <el-option
                    v-for="item in brandSelectData"
                    :key="item.id"
                    :label="item.brandName"
                    :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="产品型号">
                <el-select v-model="formInline.productCode" placeholder="" style="width: 100px"
                           @change="selected(formInline.productCode,4)">
                  <el-option
                    label="全部"
                    value="all">
                  </el-option>
                  <el-option
                    v-for="item in productCodeSelectData"
                    :key="item.id"
                    :label="item.productCode"
                    :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="正负面" label-width="60px">
                <el-select v-model="formInline.commentType" placeholder="" style="width: 100px"
                           @change="selected(formInline.commentType,5)">
                  <el-option
                    label="全部"
                    value="all">
                  </el-option>
                  <el-option
                    v-for="item in commentTypeSelectData"
                    :key="item.entry"
                    :label="item.entry"
                    :value="item.entry">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="关注点" label-width="60px">
                <el-select v-model="formInline.focus" placeholder="" @change="selected(formInline.focus,6)">
                  <el-option
                    label="全部"
                    value="all">
                  </el-option>
                  <el-option
                    v-for="item in focusSelectData"
                    :key="item.focusId"
                    :label="item.focusName"
                    :value="item.focusId">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-form>
          </el-col>

          <el-table
            :data="tableDataComment"
            border
            height="500"
            style="width: 100%;">
            <el-table-column
              prop="sentimentType"
              label="正负面"
              align="center"
              header-align="center"
              width="80">
              <template slot-scope="scope">
                <div class="type-circle"
                     :class="{ 'type-circle-1': scope.row.sentimentType=='正面', 'type-circle-2': scope.row.sentimentType=='负面',
                      'type-circle-3': scope.row.sentimentType=='中性'}"
                >{{scope.row.sentimentType}}
                </div>
              </template>
            </el-table-column>
            <el-table-column
              label="评论信息"
              header-align="center"
              min-width="180">
              <template slot-scope="scope">
                <div class="comment-detail">
                  <div>{{scope.row.sentimentComment}}</div>
                  <span class="comment-detail-imgs" v-for="(item, index) in scope.row.pictureArr">
                    <img :src="item" :alt="'评论图'+index">
                  </span>
                  <div class="comment-detail-band">
                    品牌：{{scope.row.brandName || "暂无"}} &nbsp;&nbsp;产品型号：{{scope.row.productCode || "暂无"}}
                    <span class="right">{{ scope.row.sentimentTime|fdate}}</span>
                  </div>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              label="关注点"
              header-align="center"
              width="120">
              <template slot-scope="scope">
                <ul class="comment-focus-list">
                  <li v-for="(item, index) in scope.row.focusClassifies">{{item.focusName}}</li>
                </ul>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            style="padding: 20px"
            background
            align="center"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="pSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
          </el-pagination>
        </div>

        <div class="ranking-box border-r margin-top ">
          <div class="title">
            评论关注点排名
            <!--<span class="right blue normal point"><a>更多...</a></span>-->
          </div>
          <div class="list">
            <el-table
              :data="tableDataRanking"
              border
              header-align="center"
              height="680"
              style="width: 100%">
              <el-table-column
                prop="rank"
                label="排名"
                header-align="center"
                width="50">
                <template slot-scope="scope">
                  <span
                    :style="{color:scope.row.rank==1?'#ff8244':scope.row.rank==2?'#2bb3f4':scope.row.rank==3?'#42e5a2':'#000'}">{{scope.row.rank}}</span>
                </template>
              </el-table-column>
              <el-table-column
                prop="focusName"
                label="关注点"
                header-align="center"
                width="100">
              </el-table-column>
              <el-table-column
                label="提及率"
                header-align="center"
                width="70">
                <template slot-scope="scope">
                  {{scope.row.sentimentRatio | formatPercentage}}
                </template>
              </el-table-column>
              <el-table-column
                label="评论数"
                header-align="center"
              >
                <template slot-scope="scope">
                  <span class="blue point" @click="more(scope.row.focusId)">{{scope.row.sentimentCount}}</span>条
                </template>
              </el-table-column>
            </el-table>
            <el-pagination
              style="padding: 20px"
              background
              align="center"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPageRanking"
              :page-size="pSizeRanking"
              layout="total, prev, pager, next, jumper"
              :total="totalRanking">
            </el-pagination>
          </div>
        </div>
      </div>
    </div>
    <!--模态框用以显示评论关注点评论类型分组条数获取-->
    <div class="modal fade" id="myModal">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <div class="modal-title">数据采集&nbsp;>&nbsp;线上舆情数据&nbsp;>&nbsp;关注点评论详情</div>
          </div>
          <div class="modal-body">
            <div class="row">
              <div class="border-r margin-top ">
                <el-col :span="24">
                  <div class="comment-type-box" :class="types==''?'active':''" @click="changeType('')">
                    <span class="comment-type-num">{{commentType2.全部}}</span>
                    <span class="comment-type-detail">全部评论</span>
                  </div>
                  <div class="comment-type-box" :class="types=='正面'?'active':''" @click="changeType('正面')">
                    <span class="comment-type-num">{{commentType2.正面}}</span>
                    <span class="comment-type-detail">正面</span>
                  </div>
                  <div class="comment-type-box" :class="types=='负面'?'active':''" @click="changeType('负面')">
                    <span class="comment-type-num">{{commentType2.负面}}</span>
                    <span class="comment-type-detail">负面</span>
                  </div>
                  <div class="comment-type-box" :class="types=='中性'?'active':''" @click="changeType('中性')">
                    <span class="comment-type-num">{{commentType2.中性}}</span>
                    <span class="comment-type-detail">中性</span>
                  </div>
                </el-col>
                <el-table
                  :data="tableDataComment2"
                  border
                  height="500"
                  style="width: 100%;">
                  <el-table-column
                    prop="sentimentType"
                    label="正负面"
                    align="center"
                    header-align="center"
                    width="80">
                    <template slot-scope="scope">
                      <div class="type-circle"
                           :class="{ 'type-circle-1': scope.row.sentimentType=='正面', 'type-circle-2': scope.row.sentimentType=='负面',
                      'type-circle-3': scope.row.sentimentType=='中性'}"
                      >{{scope.row.sentimentType}}
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column
                    label="评论信息"
                    header-align="center"
                    min-width="180">
                    <template slot-scope="scope">
                      <div class="comment-detail">
                        <div>{{scope.row.sentimentComment}}</div>
                        <span class="comment-detail-imgs" v-for="(item, index) in scope.row.pictureArr">
                    <img :src="item" :alt="'评论图'+index">
                  </span>
                        <div class="comment-detail-band">
                          品牌：{{scope.row.brandName || "暂无"}} &nbsp;&nbsp;产品型号：{{scope.row.productCode || "暂无"}}
                          <span class="right">{{ scope.row.sentimentTime|fdate}}</span>
                        </div>
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column
                    label="关注点"
                    header-align="center"
                    width="120">
                    <template slot-scope="scope">
                      <ul class="comment-focus-list">
                        <li v-for="(item, index) in scope.row.focusClassifies">{{item.focusName}}</li>
                      </ul>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<style lang="less" scoped>
  .online-public-option .el-table th.is-leaf,.online-public-option .gutter {
    background: -webkit-linear-gradient(#fcfcfc, #ebebeb); /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(#fcfcfc, #ebebeb); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(#fcfcfc, #ebebeb); /* Firefox 3.6 - 15 */
    background: linear-gradient(#fcfcfc, #ebebeb); /* 标准的语法（必须放在最后） */
  }
  .online-public-option .has-gutter tr th:nth-last-of-type(2){
    border-right: 0!important;
  }
  .online-public-option .el-table__body tr {
    min-height: 100px;
  }

  .online-public-option .el-form-item__label {
    font-size: 14px;
    font-weight: normal;
  }
  /*模态框里面评论类型样式*/
  .comment-type-box{
    width: 150px;
    height: 60px;
    display: inline-block;
    border-radius: 5px;
    background-color: #F5F5F5;
    margin-top: 15px;
    margin-bottom: 15px;
    margin-left: 15px;
    cursor: pointer;
  }
  .comment-type-num{
    width: 100%;
    line-height: 30px;
    padding-left: 15px;
    display: block;
  }
  .comment-type-detail{
    width: 100%;
    line-height: 30px;
    padding-left: 15px;
    display: block;
  }
  .active.comment-type-box{
    background:linear-gradient(to right, #04D5E6, #04AAF4);
  }
  .active>.comment-type-num,.active>.comment-type-detail{
    color: white;
  }
  .modal{
    width: 100%;
  }
  .modal-dialog{
    width: 100%;
    margin-top: 0;
  }
  .modal-content{
    border-radius: 0;
  }
  .border-box {
    border: 1px solid red;
    margin-bottom: 15px;
  }

  .blue {
    color: #03a9f3;
  }

  .right {
    float: right;
  }

  .normal {
    font-size: 14px;
  }

  .point {
    cursor: pointer;
  }

  .gradient-btn {
    color: #fff;
    background: linear-gradient(left, #04d6e5, #03a9f3);
    padding: 6px 10px;
    border-radius: 5px;
  }

  .title {
    height: 50px;
    line-height: 50px;
    padding: 0 10px;
    border-bottom: 1px solid #efefef;
  }

  .product-content {
    height: 60px;
    line-height: 20px;
    font-size: 14px;
    box-sizing: border-box;
    padding: 20px;
  }

  .comment-box {
    width: 700px;
    /*min-height:500px;*/
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
  }

  .comment-detail {
    margin: 10px;
  }

  .comment-detail-imgs img {
    max-width: 100px;
    max-height: 100px;
    border: 1px solid #efefef;
    margin: 10px 10px 10px 0;
  }

  .comment-focus-list {
    margin: 0;
    padding: 0;

  li {
    list-style: none;
  }

  }
  .type-circle {
    display: block;
    width: 50px;
    height: 50px;
    margin: 0 auto;
    line-height: 48px;
    text-align: center;
    font-size: 20px;
    font-weight: 500;
    color: #fff;
    /*padding: 0px;*/
    box-sizing: border-box;
    border-radius: 50%;
  }

  .type-circle-1 {
    border: 1px solid #05d5e6;
    background: #05d5e6;
  }

  .type-circle-2 {
    border: 1px solid #fa6969;
    background: #fa6969;
  }

  .type-circle-3 {
    border: 1px solid #ffc000;
    background: #ffc000;
  }

  .ranking-box {
    /*float: right;*/
    position: absolute;
    top: 0;
    bottom: 0;
    left: 720px;
    width: calc(100% - 750px);
    /*min-width: 0px;*/
    /*min-height:100%;*/
  }
</style>
<script type="es6">
  export  default {
    data() {
      return {
        commentNum: 0,
        today: `1970-01-01 08:00:00`,
        formInline: {
          category: "all",
          entry: "all",
          brand: "all",
          productCode: "all",
          commentType: "all",
          focus: "all"
        },
        //品类
        categorySelectData: [],
        //渠道
        entrySelectData: [],
        //品牌
        brandSelectData: [],
        //产品型号
        productCodeSelectData: [],
        //评论类型——正负面
        commentTypeSelectData: [],
        commentType2: {},
        //关注点
        focusSelectData: [],

        total: 0,
        pSize: 10,
        currentPage: 1,
        totalRanking: 0,
        pSizeRanking: 20,
        currentPageRanking:1,
        tableDataComment: [],
        tableDataComment2: [],
        tableDataRanking: [],
        types:'',
        id:''
      }
    },
    filters: {
      /*
       * 小数 ——> 百分比
       * */
      formatPercentage: function (point) {
        if (!point) return ''
        let str = Number(point * 100).toFixed(2);
        str += "%";
        return str;
      }
    },
    methods: {
      /* 表格
       * 数据采集-线上舆情数据-评论分析列表
       * */
      getTableData(){
        let params = {
          "method": "getSentiment",
          "query": {
            "pageNo": this.currentPage,
            "pageSize": this.pSize,
            "categoryId": this.formInline.category,
            "brandId": this.formInline.brand,
            "productId": this.formInline.productCode,
            "channel": this.formInline.entry,
            "sentimentType": this.formInline.commentType,
            "focusId": this.formInline.focus
          }
        }
        for (let i in params.query) {
          if (params.query[i] === "all") {
            params.query[i] = null
          }
        }
        this.$http.post(this.GLOBAL.host, params)
          .then((res) => {
            this.total = res.data.data.total;
            this.tableDataComment = res.data.data.list
          })
          .catch((error) => {
            this.tableDataComment = [];
            this.total = 0;
          });
      },
      /* 列表
       * 数据采集-线上舆情数据-评论关注点排名列表
       * */
      getRankingData(){
        let params = {
          "method": "getSentimentFocusRank",
          "query": {
            "pageNo": this.currentPageRanking,
            "pageSize": this.pSizeRanking,
          }
        }
        this.$http.post(this.GLOBAL.host, params)
          .then((res) => {
            this.tableDataRanking = res.data.data.list;
            this.totalRanking = res.data.data.total;
          })
          .catch((error) => {
            this.tableDataRanking = [];
            this.totalRanking = 0;
          });
      },
      /*
       * 评论总数
       * */
      getCommentNum(){
        let params = {
          "method": "getSentimentCount",
          "query": {}
        }
        this.$http.post(this.GLOBAL.host, params)
          .then((res) => {
            this.commentNum = res.data.data.count;
            let time = new Date();
            this.today= `${time.getFullYear()}-${this.tranTime(time.getMonth()+1)}-${this.tranTime(time.getDate())} ${time.getHours()}:${this.tranTime(time.getMinutes())}:${this.tranTime(time.getSeconds())}`;
          })
          .catch((error) => {
            this.commentNum = 0;
          });
      },
      /*
       * */
      tranTime(val){
        if(val < 10){
          return `0${val}`
        }else{
          return `${val}`
        }
      },
      /*
       * form选项
       * */
      selected(val, idx){
        switch (idx) {
          case 1:
            if (val === "all") {
              this.brandSelectData = [];
              this.productCodeSelectData = [];
            } else {
              this.getBrand(val);
              this.productCodeSelectData = [];
            }
            this.formInline.brand = "all";
            this.formInline.productCode = "all";
            this.getTableData();
            break;
          case 2:
            this.getTableData();
            break;
          case 3:
            if (val === "all") {
              this.productCodeSelectData = [];
            } else {
              this.getProductCode(val);
            }
            this.formInline.productCode = "all";
            this.getTableData();
            break;
          case 4:
            this.getTableData();
            break;
          case 5:
            this.getTableData();
            break;
          case 6:
            this.getTableData();
            break;
          default:
            break;
        }
      },
      /* 1
       * 数据采集-线上舆情数据-品类获取
       * */
      getType(){
        let params = {
          "method": "getSubCategory",
          "query": {
            "type": 0
          }
        }
        this.$http.post(this.GLOBAL.host, params)
          .then((res) => {
            this.categorySelectData = res.data.data
          })
          .catch((error) => {
            this.categorySelectData = [];
          });
      },
      /* 2
       * 数据采集-渠道获取
       * */
      getEntry(){
        let params = {
          "method": "getChannel",
          "query": {}
        }
        this.$http.post(this.GLOBAL.host, params)
          .then((res) => {
            this.entrySelectData = res.data.data
          })
          .catch((error) => {
            this.entrySelectData = [];
          });
      },
      /* 3
       * 数据采集-线上舆情数据-品类品牌关系
       * */
      getBrand(val){
        let params = {
          "method": "getCBRelation",
          "query": {
            "categoryId": val
          }
        }
        this.$http.post(this.GLOBAL.host, params)
          .then((res) => {
            this.brandSelectData = res.data.data
          })
          .catch((error) => {
            this.brandSelectData = [];
            this.formInline.brand = "all";
          });
      },
      /* 4
       * 数据采集-线上舆情数据-品类品牌产品型号关系
       * */
      getProductCode(val){
        let params = {
          "method": "getProduct",
          "query": {
            "categoryId": this.formInline.category,
            "brandId": val
          }
        }
        this.$http.post(this.GLOBAL.host, params)
          .then((res) => {
            this.productCodeSelectData = res.data.data
          })
          .catch((error) => {
            this.formInline.productCode = "all";
            this.productCodeSelectData = [];
          });
      },
      /* 5
       * 数据采集-线上舆情数据-评论类型
       * */
      getCommentType(){
        let params = {
          "method": "getSentimentType",
          "query": {}
        }
        this.$http.post(this.GLOBAL.host, params)
          .then((res) => {
            this.commentTypeSelectData = res.data.data
          })
          .catch((error) => {
            this.commentTypeSelectData = [];
          });
      },
      /* 6
       * 数据采集-线上舆情数据-关注点类型
       * */
      getFocus(){
        let params = {
          "method": "getFocus",
          "query": {}
        }
        this.$http.post(this.GLOBAL.host, params)
          .then((res) => {
            this.focusSelectData = res.data.data
          })
          .catch((error) => {
            this.focusSelectData = [];
          });
      },
      //页数
      handleSizeChange(val) {
        this.pSize = val;
        this.getTableData();
      },
      handleCurrentChange(val) {
        this.currentPage = val
        this.getTableData();
      },
      more(id){
        $('#myModal').modal('show')
        this.id=id
        this.getCommentType2(id);
        this.getTableData2(id);
      },
      // 获取评论类型-显示在模态框上
      getCommentType2(id){
        let params = {
          "method": "getSentimentFocusCount",
          "query": {
            focusId:id
          }
        }
        this.$http.post(this.GLOBAL.host, params)
          .then((res) => {
            this.commentType2 = res.data.data
          })
          .catch((error) => {
            this.commentType2 = [];
          });
      },
      getTableData2(id,types){
        let params = {
          "method": "getSentiment",
          "query": {
            "pageNo": 1,
            "pageSize": 10,
            "categoryId":'',
            "brandId":'',
            "productId": '',
            "channel": '',
            "sentimentType": types,
            "focusId": id
          }
        }
        for (let i in params.query) {
          if (params.query[i] === "all") {
            params.query[i] = null
          }
        }
        this.$http.post(this.GLOBAL.host, params)
          .then((res) => {
            this.total = res.data.data.total;
            this.tableDataComment2 = res.data.data.list
          })
          .catch((error) => {
            this.tableDataComment2 = [];
            this.total = 0;
          });
      },
      // 切换评论类型查看
      changeType(types){
        this.types=types;
        this.getTableData2(this.id,this.types)
      }
    },
    mounted(){
      this.getTableData();
      this.getRankingData();

      this.getCommentNum();
      this.getType();
      this.getEntry();
      this.getCommentType();
      this.getFocus();
    }
  }

</script>
